<!doctype html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="description" content="辣鸡天台的Blog">
    <meta name="keywords" content="天台,你发现了一只天台,terrace,terracecn,辣鸡,死宅,二次元,程序员">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>你发现了一只天台</title>
    <Link rel="Shortcut Icon" href="http://s.gravatar.com/avatar/2922df22e5cadc66ae0e1ddc4c377c08?s=80" />
    <link rel="stylesheet" href="./css/index.css" />
    <link rel="stylesheet" href="./css/index.m.css" />
    <link href="//cdn.bootcss.com/highlight.js/9.9.0/styles/atom-one-dark.min.css" rel="stylesheet">
    <script>
        var Blog = {
            getList: 'http://terracecn.applinzi.com/article_list.php',
            getContent: 'http://terracecn.applinzi.com/article_detail.php',
            getTag: 'http://terracecn.applinzi.com/notebooks.php',
            jianshuId: '5a7f510f1934',
            githubUname: 'TerraceCN'
        };
    </script>
    <!-- 此博客前端为好友Charten dalao所写,Github: https://github.com/Char-Ten/Char-Ten.github.io ,后端是咱自己写的Orz,特此感谢Charten大佬! -->
</head>

<body>
    <div id="app">
        <section class="stage " :class="addStageClass">
            <div class="stage-view">
                <header class="hd-card">
                    <div class="hd-card_img">
                        <img class="hd-card_img-item" src="http://s.gravatar.com/avatar/2922df22e5cadc66ae0e1ddc4c377c08?s=256" />
                    </div>
                    <div class="hd-card_info">
                        <h1>天台</h1>
                        <p class="hd-card_info-sum">沉迷甜甜无法自拔</p>
                    </div>
                    <nav class="hd-card_nav">
                        <a>
                            <i class="u-icon">&#xe62b;</i>
                            <span>首页</span>
                        </a>
                        <a href="#/list">
                            <i class="u-icon">&#xe9d0;</i>
                            <span>目录</span>
                        </a>
                        <a href="#/link">
                            <i class="u-icon">&#xe647;</i>
                            <span>友链</span>
                        </a>
                        <a href="#/github">
                            <i class="u-icon">&#xe6cf;</i>
                            <span>GitHub垃圾场</span>
                        </a>
                    </nav>
                </header>
                <div class="next">
                    <a class="next_btn" href="#/list"></a>
                </div>
            </div>
            <div class="stage-view dir" @mousewheel="eWheelDirStage($event)">
                <header class="dir_hd">
                    <i class="u-icon">&#xe6b6;</i>
                    <p class="u-en">ARTICLE LIST</p>
                    <h2>文章目录</h2>
                    <fieldset class="dir_hd-info">
                        <legend>
                            <p>搞事啊</p>
                            <p class="u-sm">GAO SHI</p>
                        </legend>
                        <app-dir-info></app-dir-info>
                    </fieldset>
                </header>
                <app-dir></app-dir>
                <div class="next">
                    <a class="next_btn" href="#/link"></a>
                </div>
            </div>
            <div class="stage-view fd">
                <section class="fd_bd">
                    <app-link></app-link>
                </section>
                <header class="fd_hd">
                    <div class="fd_hd-ct">
                        <i class="u-icon">&#xe647;</i>
                        <h2>友情链接</h2>
                        <p>FRIEND LINK</p>
                        <p>To Make Friend : <em>'BOY♂NEXT♂DOOR'</em></p>
                    </div>
                </header>
            </div>
            <div class="stage-view github" @mousewheel="eWheelGitHubStage($event)" @touchstart="eTouchStartGithubStage($event)" @touchend="eTouchEndtGithubStage($event)">
                <app-git></app-git>
                <header class="github_hd cell">
                    <div>
                        <i class="u-icon">&#xe6cf;</i>
                    </div>
                    <div>
                        <h2>Github 垃圾场</h2>
                        <p>Github Dump</p>
                    </div>
                </header>
            </div>
        </section>
        <transition name="mask_anmt">
            <div class="mask" v-if="isShowMask" @click="eMaskClick"></div>
        </transition>
        <app-aside></app-aside>
        <app-atc></app-atc>
    </div>
    <div id="tp">
        <!--侧边栏-->
        <template id="tp_aside">
            <aside class="aside" :class="addAsideClass">
                <nav class="aside_ct">
                    <a class="aside-item" 
                        v-for="item,index in navItem" 
                        :href="item[0]"
                        :class="{'z-atv':isNavItemAtv===index}">
                        <i class="u-icon" v-html="item[1]"></i>
                        <span class="aside-word">{{item[2]}}</span> 
                    </a>
                </nav>
                <div class="aside-btn" @click="eCallAsideOut"></div>
            </aside>
        </template>

        <!--文章目录-->
        <template id="tp_dir">
            <section class="dir_bd">
                <transition-group 
                tag="ul" 
                class="dir_ct" 
                name="dir-item_anmt" 
                mode="out-in"
                :style="setTransform">
                    <li class="dir-item " 
                    v-for="item in list"  
                    :key="item.contentUrl"
                    @mouseover="eMouseover(item)">
                        <a class="cell dir-item_a"
                        :href="_ReplaceHref(item.contentUrl)"
                        @click="eClick(item)">
                            <div class="cell-hd dir-item_hd">
                                <img v-if="item.imgSrc" 
                                class="dir-item_img" 
                                :src="item.imgSrc.replace(/^http[s]?:/,'')" />
                            </div>
                            <div class="cell-bd dir-item_ct">
                                <h3>{{item.title}}</h3>
                                <article>{{item.summary}}</article>
                                <div class="dir-item_ft cell" >
                                    <div>
                                        <i class="u-icon">&#xe645;</i>
                                        <span>{{item.view}}</span>
                                    </div>
                                    <div>
                                        <i class="u-icon">&#xe600;</i>
                                        <span>{{item.time.replace(/[T+]/g,' ')}}</span>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </li>
                    <li class="dir-item dir-loadmore" key="'loadMore'">
                        <a class="dir-load-more_btn"
                        :class="addLoadMoreClass"
                        @click="eLoadMore"
                        >{{isLoadMore?'加载更多':'没有更多'}}</a>
                    </li>
                </transition-group>
            </section>
        </template>

        <!--文章列表左侧底部信息-->
        <template id="tp_dir-info">
            <div>
                <h3>{{title}}</h3>
                <article>{{content}}</article>
            </div>
        </template>

        <!--github项目展示面板-->
        <template id="tp_github">
            <transition-group tag="section" name="list_anmt" mode="out-in" class="github_bd">
                <a  class="github-item" 
                v-for="item,i in filtedList"
                :class="['github-item_'+i]" 
                :href="item.html_url?item.html_url:null"
                :key="item.id"
                @click="eItemClick($event,item.index,i)">
                    <h3 class="github-item_tt">{{item.name}}</h3>
                    <div class="github-item_ct">
                        <p>{{item.description?item.description:''}}</p>
                    </div>
                    <footer class="github-item_ft cell">
                        <div class="github-tag" title="语言">
                            <i class="u-icon">&#xe605;</i>
                            <span>{{item.language}}</span>
                        </div>
                        <div class="github-tag">
                            <i class="u-icon">&#xe601;</i>
                            <span>{{item.stargazers_count}}</span>
                        </div>
                    </footer>
                </a>
            </transition-group>
        </template>

        <!--友情链接列表-->
        <template id="tp_fd-link">
            <transition-group tag="ul" class="fd_ct"
            name="fd_anmt">
                <li class="fd-item"
                v-for="item,i in list"
                :key="i">
                    <div class="cell">
                        <div>
                            <div class="fd-item_img">
                                <i class="u-icon">&#xe647;</i>
                            </div>
                        </div>
                        <div class="cell-bd">
                            <div class="fd-item_dialog">这是{{item.name}} dalao的<a :href="item.href">{{item.type}}</a>，快去膜！</div>
                        </div>
                        <div class="cell-ft"></div>
                    </div>
                </li>
            </transition-group>
        </template>

        <!--文章视图-->
        <template id="tp_atc">
            <section class="atc" :class="addAtcClass">
                <div class="atc-mask">
                    <div class="atc-mask_blur" :style="backgroundImage"></div>
                </div>
                <div class="atc-ct">
                    <article class="atc-vw">
                        <header class="atc-vw_hd" :style="backgroundImage"  :id="atcId">
                            <div class="atc-vw_mask"></div>
                            <div class="atc-vw_hgroup">
                                <h1 class="atc-vw_h1">{{info.title}}</h1>
                                <ul class="atc-vw_hinfo">
                                    <li>
                                        <span>{{info.time}}</span>
                                    </li>
                                    <li>
                                        <span>字数</span>
                                        <span>{{info.wordage}}</span>
                                    </li>
                                </ul>
                            </div>
                        </header>
                        <section class="atc-bd" v-html="content"></section>
                        <footer class="atc-ft">
                            <h5>更多文章</h5>
                            <ul class="atc-link">
                                <li v-for="item in list">
                                    <a class="atc-rdm" target="_blank"
                                    :href="_ReplaceHref(item.contentUrl)"
                                    @click="eClickMoreAtc(item.contentUrl)">{{item.title}}</a>
                                </li>
                            </ul>
                            <div class="atc-link">
                                <a href="#/list">
                                    <i class="u-icon">&#xe612;</i>
                                    <span>返回目录</span>
                                </a>
                                <a class="atc-link_r">
                                    <i class="u-icon">&#xe617;</i>
                                    <span>留言</span>
                                </a>
                            </div>
                        </footer>
                    </article>
                </div>
            </section>
        </template>
    </div>
    <script src="//cdn.bootcss.com/highlight.js/9.9.0/highlight.min.js"></script>
    <script src="//cdn.bootcss.com/vue/2.0.0/vue.min.js"></script>
    <script src="//cdn.bootcss.com/vue-resource/1.0.3/vue-resource.min.js"></script>
    <script src="./js/index.js"></script>
</body>

</html>